import React from 'react';
import {Provider, observer, inject} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {toJS} from "mobx";
import { Tabs,Tools, WhiteSpace, Button,Icon } from 'weaver-mobile';
import SignItem from './SignItem';
import './style/index';
import jQuery from "jquery";
const getLocaleLabel = Tools.getLocaleLabel;

@inject("signGroupPageStore","odocComsStore")
@observer
export default class OdocComs4Export extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
    }

    componentWillUnmount() {
        let {setProperty,lastTabid,tabType} = this.props.signGroupPageStore;
        setProperty({tabPage:0})
        let _that = this;
        if(tabType==2){
            setProperty({tabid:lastTabid});
            setTimeout(function(){
                _that.loadImag();
            },1000);

        }
    }

    componentWillMount() {
        const {cusTabStore} = this.props;
        let {requestParam = {},urlParams={},workflowStores} = cusTabStore;
        let {requestid,workflowid} = toJS(requestParam);
        let {id,tabType,tabUrl} = toJS(urlParams);
        let {wfGlobalStore} = workflowStores;
        let {commonParam} = wfGlobalStore;
        let {getSignGroupPageList,setProperty,initLogParams,tabid,tabs} = this.props.signGroupPageStore;

        if(tabType==2){
            setProperty({lastTabid : tabid});
        }

        initLogParams(toJS(commonParam));
        setProperty({
            pageLoading:true,
            workflowid,
            requestid,
            tabid:id,
            tabType,
            tabPage:0
        });
        if(!toJS(tabs)[id]){
            getSignGroupPageList();
        }
    }

    componentDidUpdate() {
    }

    handleChange = (t, i) => {
        let {setProperty} = this.props.signGroupPageStore;
        setProperty({tabPage:i});
        let _that = this;
        setTimeout(function(){
            _that.loadImag();
        },1000);
    }
    renderContent = (tab) =>{
        let {cusTabStore} = this.props;
        let {urlParams={}} = cusTabStore;
        let {type} = toJS(urlParams);
        let {tabPage,groupLists,signGroupPageLoadMore} = this.props.signGroupPageStore;
        let {groupName,groupDatas,groupColumn,groupid,mouldid,pagenumber,hasmore} = tab;
        return (<div style={{ display: 'flex', height: '100%', backgroundColor: '#fff' }}>
            {groupDatas.length>0 && <div style={{width:"100%"}} className={"odoc-sign-group-item"}>
                {groupDatas.map(item=>{
                    return <SignItem groupDatas={item} groupColumn={groupColumn} key={item.logid} type={type}/>
                })}
                {hasmore==1 && <div style={{"height":"40px",textAlign:"center",lineHeight:"40px"}} onClick={()=>{signGroupPageLoadMore(groupid,mouldid,pagenumber,tabPage)}}>加载更多</div>}
            </div>}
            {groupDatas.length<=0 && <div style={{width:"100%"}}>
                <div style={{textAlign:"center",margin:"200px 0 10px 0"}}><Icon type={"blog-bugaoxing"} size={"large"}/></div>
                <div style={{textAlign:"center"}}><span>暂无数据</span></div>
            </div>}
        </div>);
    }

    loadImag=()=>{
        window.formImgLazyLoad(jQuery('.workflow-signSetting'))//图片懒加载
    }

    doScrollEvent=()=>{
        this.loadImag();
    }

    render() {
        let {tabPage,tabs={},tabid=""} = this.props.signGroupPageStore;

      let mouldTabs = [];
      if(tabid!="" && toJS(tabs)[tabid] && toJS(tabs)[tabid].length>0){
        mouldTabs = toJS(tabs)[tabid];
      }else{
          tabPage=0;
      }
        return (
            <div style={{height:"100%"}} className={"workflow-signSetting"} onScroll={()=>{this.doScrollEvent()}}>
                <Tabs tabs={mouldTabs} onChange={this.handleChange} page={tabPage} renderTabBar={props => <Tabs.ExpandTabBar {...props} fix={15} maxLength={120} />}>
                    {this.renderContent}
                </Tabs>
            </div>
        );
    }
}